<template>
	<div>
		<div v-if="fileArr.length || echoFileArr.length" class="upload-list">
			<!-- 已选文件 -->
			<div v-for="(fileObj, index) in fileArr" :key="fileObj.id" class="item">
				<div class="name-row">
					<!-- <file-image :file-name="fileObj.name" :is-file="true" /> -->
					<div class="name">{{ fileObj.name }}</div>
					<div>
						<el-progress
							type="circle"
							:show-text="false"
							stroke-width="3"
							width="16"
							v-if="percentage[getKey(fileObj)] > 1 && percentage[getKey(fileObj)] < 100"
							class="percentage"
							:percentage="percentage[getKey(fileObj)] || 0"
							size="small" />
						<span
							v-if="percentage[getKey(fileObj)] < 100 && percentage[getKey(fileObj)] > 0"
							style="color: var(--white)">
							上传中...{{ percentage[getKey(fileObj)] }}%
							<a-spin />
						</span>

						<img
							v-if="percentage[getKey(fileObj)] === 100 && enginePercentages[index]"
							style="width: 16px; height: 16px"
							:src="uploadedIcon" />
						<el-icon
							style="cursor: pointer"
							v-if="percentage[getKey(fileObj)] === 0 || percentage[getKey(fileObj)] === 100"
							@click="close(fileObj, index)">
							<Delete />
						</el-icon>
					</div>
				</div>
				<!-- <div class="discription-row">
					<div class="label" style="width: 78px">说明</div>
					<el-input
						v-model="fileObj.description"
						:disabled="disabled"
						:max-length="255"
						placeholder="请输入"
						allow-clear />
				</div> -->
			</div>
			<!-- 回显文件 -->
			<div v-for="(fileObj, index) in echoFileArr" :key="fileObj.id" class="item">
				<div class="name-row">
					<!-- <file-image :file-name="fileObj.name" :is-file="true" /> -->
					<div class="name">{{ fileObj.fileName }}</div>
					<div>
						<el-icon style="cursor: pointer" @click="deleteEchoFile(fileObj, index)">
							<Delete />
						</el-icon>
					</div>
				</div>
				<!-- <div class="discription-row">
					<div class="label" style="width: 78px">说明</div>
					<el-input
						v-model="fileObj.description"
						:disabled="disabled"
						:max-length="255"
						placeholder="请输入"
						allow-clear />
				</div> -->
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import uploadedIcon from './uploaded.png';
// import FileImage from './image-file.vue';
import { deleteFile } from '../api';

const props = defineProps({
	// 已选文件数组
	fileArr: {
		type: Array<any>,
		default() {
			return [];
		}
	},
	// 回显文件数组(之前已经保存过的文件)
	echoFileArr: {
		type: Array<any>,
		default() {
			return [];
		}
	},
	// 文件的实时上传进度
	percentage: {
		type: Object,
		default() {
			return {};
		}
	},
	// 是否禁用
	disabled: {
		type: Boolean,
		default: false
	},
	// 文件上传引擎进度
	enginePercentages: {
		type: Array,
		default() {
			return [];
		}
	}
});

const emit = defineEmits(['deleteUpload']);

// 格式化文件大小
// const formatFileSize = (value: any) => {
//   if (value === null || value === '' || value === '0') {
//     return '-';
//   }
//   const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//   let index = 0;
//   const srcsize = parseFloat(value);
//   index = Math.floor(Math.log(srcsize) / Math.log(1024));
//   const size = srcsize / 1024 ** index;
//   const sizeStr = size.toFixed(2); // 保留的小数位数
//   return sizeStr + unitArr[index];
// };

const getKey = (fileObj: any) => {
	return `${fileObj.name}&${fileObj.lastModifiedDate}`;
};
// 取消分片上传/删除已上传文件
const close = (fileObj: any, index: number) => {
	const key = getKey(fileObj);

	if (props.percentage[key] < 100) {
		// TODO
		// this.$emit('cancelFile', fileObj); // 分片上传取消
	} else {
		const data = {
			f8s: new Array(fileObj.fileToken)
		};

		deleteFile(data)
			.then((res) => {
				if (res.status) {
					// eslint-disable-next-line vue/no-mutating-props
					props.fileArr.splice(index, 1);
					// TODO
					// this.$emit('update:fileArr', this.fileArr);

					// eslint-disable-next-line vue/no-mutating-props
					delete props.percentage[key];
					// TODO
					// this.$emit('update:percentage', percentage);
					emit('deleteUpload', fileObj);
				}
			})
			.catch((err) => {
				ElMessage.error(`文件删除失败：${err}`);
			});
	}
};
// 删除回显的文件
const deleteEchoFile = (fileObj: WebUploader.File, index: number) => {
	const data = {
		f8s: new Array(fileObj.fileToken)
	};

	deleteFile(data)
		.then((res) => {
			if (res.status) {
				// eslint-disable-next-line vue/no-mutating-props
				props.echoFileArr.splice(index, 1);
				// TODO
				// this.$emit('update:echoFileArr', this.echoFileArr);
			}
		})
		.catch((err) => {
			ElMessage.error(`文件删除失败：${err}`);
		});
};
</script>

<style lang="scss" scoped>
/* 覆盖文件列表默认样式 */
.upload-list {
	width: 100%;
	margin-top: 24px;
	max-height: 362px;
	overflow: auto;

	.item {
		margin-top: 16px;
		padding: 8px 12px;
		background-color: var(--color-fill-1);
		border-radius: 4px;
		overflow: hidden;

		.name-row {
			display: flex;
			align-items: center;

			img {
				width: 32px;
				height: 32px;
				margin-right: 12px;
				border-radius: 2px;
			}

			.name {
				flex: 1;
				padding-right: 19px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family:
					Source Han Sans CN-Regular,
					Source Han Sans CN;
			}

			.percentage {
				width: 16px;
				height: 16px;

				:deep(.arco-progress-type-line) {
					display: block;
				}

				img,
				svg {
					width: 100%;
					height: 100%;
				}
				svg {
					cursor: pointer;
				}
			}
		}

		.discription-row {
			display: flex;
			margin-top: 8px;

			.label {
				display: inline-block;
				width: 44px;
				margin-top: 5px;
				font-family:
					Source Han Sans CN-Regular,
					Source Han Sans CN;
			}

			:deep(.arco-textarea-wrapper) {
				flex: 1;
				border-radius: 4px;
			}
		}
	}

	.item:first-of-type {
		margin-top: 0;
	}
}
</style>
